<template>
  <CardMode
    class="evaluate"
    title="房客点评"
    :more="`全部${hotel.commentNum}条`"
    @more="to('/pages-sub/hotel/evaluate/index', { id: hotel.hotelId })"
    v-if="hotel.commentNum > 0"
  >
    <div class="card">
      <div class="score">
        <div class="num">{{ hotel.score }}</div>
        <div class="info">
          <div class="text">分</div>
          <div class="text">{{ hotel.commentNum }}条</div>
        </div>
      </div>

      <div class="type" v-if="hotel.scoreItems.length > 0">
        <div class="item">
          <div class="text">
            {{ hotel.scoreItems[0].name }}
            <span>{{ hotel.scoreItems[0].score }}</span>
          </div>
          <div class="text" v-if="hotel.scoreItems.length > 1">
            {{ hotel.scoreItems[1].name }}
            <span>{{ hotel.scoreItems[1].score }}</span>
          </div>
        </div>
        <div class="item" v-if="hotel.scoreItems.length > 2">
          <div class="text">
            {{ hotel.scoreItems[2].name }}
            <span>{{ hotel.scoreItems[2].score }}</span>
          </div>
          <div class="text" v-if="hotel.scoreItems.length > 3">
            {{ hotel.scoreItems[3].name }}
            <span>{{ hotel.scoreItems[3].score }}</span>
          </div>
        </div>
        <div class="item" v-if="hotel.scoreItems.length > 4">
          <div class="text">
            {{ hotel.scoreItems[4].name }}
            <span>{{ hotel.scoreItems[4].score }}</span>
          </div>
          <div class="text" v-if="hotel.scoreItems.length > 5">
            {{ hotel.scoreItems[5].name }}
            <span>{{ hotel.scoreItems[5].score }}</span>
          </div>
        </div>
      </div>
    </div>

    <div class="user-evaluate" v-if="hotel.latestScoringList.length > 0">
      <UserEvaluate :data="hotel.latestScoringList[0]" />
    </div>
  </CardMode>
</template>
<script setup lang="ts">
import { to } from '@/utils/page'
import UserEvaluate from '../../components/UserEvaluate'

defineOptions({ name: 'Evaluate' })

defineProps(['hotel'])
</script>
<style lang="scss" scoped>
.evaluate {
  :deep(.card-content) {
    padding: 0 23rpx 23rpx;
  }
  .card {
    display: flex;
    align-items: center;
    height: 146rpx;
    background-color: #f4f9fd;
    border-radius: 23rpx;
    .score {
      display: flex;
      flex: 1;
      align-items: center;
      padding: 0 23rpx;
      .num {
        font-size: 92rpx;
        font-weight: 700;
        line-height: 108rpx;
        letter-spacing: 0;
      }
      .info {
        margin-left: 4rpx;
        .text {
          font-size: 23rpx;
          line-height: 40rpx;
          color: var(--color2);
        }
      }
    }

    .type {
      display: flex;
      padding: 0 12 rpx;
      .item {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 62rpx;
        padding: 0 12rpx;
        @include border-right(#dfe3e6);
        &:last-child {
          @include border-right(transparent);
        }
        .text {
          font-size: 20rpx;
          line-height: 23rpx;

          span {
            font-weight: 700;
            color: var(--color1);
          }
        }
      }
    }
  }

  .user-evaluate {
    margin-top: 38rpx;
  }
}
</style>
